<template>
  <div class="workBenchContainer">
    <el-dialog
        title="重置工作台"
        :visible.sync="dialogResetWorkBench"
        width="420px"
        :before-close="closeALL">
            
            <div class="workItem">
                <span>当前工作台</span>
                <el-select v-model="currentRoleTheme.themeName" placeholder="请选择" @change="workBenchChange">
                    <el-option
                    v-for="item in roleTheme"
                    :key="item.themeId"
                    :label="item.themeName"
                    :value="item.themeId"
                    >
                    </el-option>
                </el-select>
            </div>
            
        <span slot="footer" class="dialog-footer">
            <el-button @click="closeALL">取 消</el-button>
            <el-button type="primary" @click="workBenchSure">确 定</el-button>
        </span>
    </el-dialog>
  </div>
</template>

<script>
import { createNamespacedHelpers } from 'vuex';
const { mapState, mapGetters, mapMutations, mapActions } = createNamespacedHelpers('homeModule');
export default {
    name: 'ResetWorkBench',
    props: ['dialogResetWorkBench'],
    data () {
        return {
            workBenchId:'', // 切换重置工作台的id
        };
    },
    computed: {
        ...mapState({
            roleTheme:state => state.roleTheme,
            currentRoleTheme:state => state.currentRoleTheme
        }),
        ...mapGetters([
        ])
    },
    created(){
        // this.workBench = this.currentRoleTheme.themeName;
    },
    methods:{
        ...mapMutations([
            
        ]),
        ...mapActions([
            
        ]),
        // 关闭弹框
        closeALL () {
            // 子组件调用父组件的方法
            this.$parent.closeALL();
        },
        // 切换工作台
        workBenchChange(id){
            this.workBenchId = id;
        },
        // 提交重置的工作台
        workBenchSure () {}
    }
};
</script>

<style lang="scss" scoped>
.workBenchContainer{
    .workItem{
        margin-top: 10px;
        margin-left: 20px;
        span{
            margin-bottom: 10px;
            margin-right:20px;
            display: inline-block;
        }
    }
}
    
</style>